<!-- 添加文件弹窗 -->
<template>
  <ElDialog
    v-model="modalFlag"
    :title="modalTitle"
    :destroy-on-close="true"
    width="300px"
  >
    <ElForm ref="formRef" :model="formData">
      <ElFormItem class="mt-2">
        <ElInput
          v-model="formData.name"
          prefix-icon="el-icon-folder-add"
          placeholder="请输入文件名"
          ref="inputRef"
        />
      </ElFormItem>
      <ElFormItem class="mt-2" v-if="!isDir">
        <ElRadio v-model="formData.editable" :label="true"
          >所有人可编辑</ElRadio
        >
        <ElRadio v-model="formData.editable" :label="false"
          >仅自己可编辑</ElRadio
        >
      </ElFormItem>
    </ElForm>
    <div class="flex justify-end">
      <ElButton @click="modalFlag = false">取消</ElButton>
      <ElButton type="primary" @click="confirm">{{
        handle === "add" ? "确认添加" : "确认修改"
      }}</ElButton>
    </div>
  </ElDialog>
</template>

<script setup lang="ts">
/**
 * @vue-prop {Number} initialCounter - Initial counter's value
 * @vue-prop {Number} [step=1] - Step
 * @vue-data {Number} counter - Current counter's value
 * @vue-computed {String} message
 * @vue-event {Number} increment - Emit counter's value after increment
 * @vue-event {Number} decrement - Emit counter's value after decrement
 */
import useState from "./hooks/useState"
import useAddFile from "./hooks/useAddFile"
import useUpdFile from "./hooks/useUpdFile"
import { defineEmits, defineProps, defineExpose } from "vue"
import {
  ElForm,
  ElFormItem,
  ElButton,
  ElDialog,
  ElRadio,
  ElInput,
} from "element-plus"

const props = defineProps<{
  handle: "add" | "update"
  parentId: number | null
  flag: boolean
  isDir: boolean
}>()

const emit = defineEmits<{
  (e: "update:flag", flag: boolean): void
  (
    e: "updateFile",
    parentId: number | null,
    handle: "add" | "update"
  ): Promise<void>
}>()

const { modalFlag, formData, inputRef, modalTitle } = useState(props, emit)
const { addFile } = useAddFile(props, emit, formData, modalFlag)
const { updFile } = useUpdFile(props, emit, formData, modalFlag)
const confirm = () => {
  if (props.handle === "add") {
    addFile()
  } else {
    updFile()
  }
}
defineExpose({
  formData,
})
</script>

<style lang="scss" scoped></style>
